<template>
	<view class="user-chat-item">
		<view v-if="item.gstime" class="user-chat-list-chat-time">{{item.gstime}}</view>
		<view class="user-chat-list u-f " :class="{'user-chat-me':item.isme}">
			<image v-if="!item.isme" :src="item.userpic" lazy-load mode='widthFix'></image>
			<view class="user-chat-list-body">
				<!-- 文字 -->
				<text v-if="item.type==='text'">{{item.data}}</text>
				<!-- 图片 -->
				<image v-if="item.type==='img'" :src="item.data" mode="widthFix"></image>
				
			</view>
			<image v-if="item.isme" :src="item.userpic" lazy-load mode='widthFix'></image>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			item:Object,
			index: Number
		}
	}
</script>

<style scoped>
	.user-chat-item{
		padding: 0 20upx;
	}
	.user-chat-list {
		padding: 20upx 0;
	}
	.user-chat-list > image{
		width:100upx ;
		height:100upx;
		border-radius: 50%;
		flex-shrink: 0;
	}
	.user-chat-list-body{
		position: relative;
		background: #F4F4F4;
		padding:25upx;
		margin-left: 20upx;
		border-radius: 20upx;
		margin-right:100upx;
	}
	.user-chat-list-body::after{
		content:"";
		position:absolute;
		left: -30upx;
		top:20upx;
		border: 16upx solid #f4f4f4;
		border-color: transparent #f4f4f4 transparent transparent;
	}
	.user-chat-me {
		justify-content: flex-end;
	}
	.user-chat-me .user-chat-list-body{
		margin-right:20upx;
		margin-left: 100upx;
	}
	.user-chat-me .user-chat-list-body::after{
		
		right:-30upx;
		left:auto;
		border-color: transparent transparent transparent #f4f4f4;
	}
	.user-chat-list-body > image {
		max-width: 150upx;
		max-height: 200upx;
		vertical-align: middle;
	}
	.user-chat-list-chat-time{
		display: flex;
		justify-content: center;
		color:#ccc;
	}
</style>
